<template>
    <my-tab
        :tabBars="tabList"
        :current="formData.type"
        :show-content="false"
        boxName="spread"
        @on-current-tab="onCurrentTab">
      <form class="book-room-wrap" @submit="formSubmit">
        <view class="room-head">基本信息</view>
        <uni-list>
          <uni-list-item v-if="formData.type===0" title="企业名称">
            <template v-slot:footer>
              <input name="enterpriseName" class="right-input" placeholder="请输入企业名称"/>
            </template>
          </uni-list-item>
          <uni-list-item title="联系人">
            <template v-slot:footer>
              <input name="contacts" class="right-input" placeholder="请输入姓名"/>
            </template>
          </uni-list-item>
          <uni-list-item title="联系方式">
            <template v-slot:footer>
              <input name="phone" type="number" class="right-input" placeholder="请输入联系方式"/>
            </template>
          </uni-list-item>
          <uni-list-item title="邮箱">
            <template v-slot:footer>
              <input name="email" class="right-input" placeholder="请输入邮箱"/>
            </template>
          </uni-list-item>

          <template v-if="formData.type===1">
            <uni-list-item title="证件类型" :rightText="formData.certName" link @click="setPopupData('isOpen')"/>
            <uni-list-item title="证件号">
              <template v-slot:footer>
                <input name="certNumber" class="right-input" placeholder="请输入证件号"/>
              </template>
            </uni-list-item>
          </template>
          <template v-else>
            <uni-list-item title="统一社会信用代码">
              <template v-slot:footer>
                <input name="certNumber" class="right-input" placeholder="请输入您的企业信用代码"/>
              </template>
            </uni-list-item>
          </template>
        </uni-list>
        <view class="room-interval"/>
        <view class="room-head">房源信息</view>
        <uni-list>
          <uni-list-item title="户型" :rightText="formData.houseName"/>
          <uni-list-item title="数量">
            <template v-slot:footer>
              <uni-number-box :min="1" v-model="formData.number"/>
            </template>
          </uni-list-item>
          <uni-list-item title="租金标准" :rightText="formData.amount + '元/月'"/>
          <uni-list-item title="租赁保证金标准" :rightText="formData.deposit + '元/套'"/>
          <uni-list-item title="预订金" :rightText="(formData.reservePrice * formData.number).toString() + '元'"/>
        </uni-list>
        <view class="room-interval" style="height: 80rpx"/>

        <view class="room-btn">
          <button class="btn" form-type="submit">提交审核</button>
        </view>
      </form>
    </my-tab>
    <uni-popup ref="popup" type="bottom" round background-color="#ffffff">
      <view class="room-popup">
        <view class="title-radio">证件类型</view>
        <uni-data-checkbox mode="list" icon="right" v-model="formData.certType" :localdata="cardList"
                           @change="handleChange"/>
      </view>
    </uni-popup>
</template>
<script setup>
import {reactive, ref, getCurrentInstance} from "vue"
import {onShow, onLoad} from "@dcloudio/uni-app";
import {getDictConfigListByType} from "@/package_kuafu_apartment/pages/api/home"
import MyTab from "@/package_kuafu_apartment/pages/components/tabs/index.vue";
import UniListItem from "@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniList from "@/uni_modules/uni-list/components/uni-list/uni-list.vue";
import UniNumberBox from "@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup";
import {customNav} from "@/utils/customNav";

const {proxy} = getCurrentInstance()
const tabList = ref([{name: "个人预订", id: 1}, {name: "企业预订", id: 0}])
const cardList = ref([])
const formData = reactive({
  contacts: '',
  phone: '',
  certNumber: '',
  enterpriseName: null,
  certName: "请选择证件类型",
  certType: null,
  number: 1,
  type: 1,//0:企业；1：个人
  smallHouseTypeId: null,
  amount: 0,
  houseName: null,
  email: '',
  deposit: '',
  reservePrice: ''
})
const checkVal = ref()
const popup = ref();

onLoad((option) => {
  if (option) {
    formData.smallHouseTypeId = option.smallId
    formData.houseName = option.houseName
    formData.amount = option.amount
    formData.reservePrice = option?.reservePrice
    formData.deposit = option?.deposit
    formData.certName ="请选择证件类型";
  }
})
onShow(() => {
  showCardData()
})
const showCardData = async () => {
  let res = await getDictConfigListByType("4")
  let {data, code} = res
  if (code === 200) {
    cardList.value = data[0].children.map(v => {
      return {
        text: v.filedName,
        value: v.filedName
      }
    })
  }
}

function formSubmit(e) {
  formData.contacts = e.detail.value.contacts
  formData.certNumber = e.detail.value.certNumber
  formData.phone = e.detail.value.phone
  formData.email = e.detail.value.email
  const isPropertyNull = (obj, prop) => {
    return obj[prop] === null || obj[prop] === '';
  }
  let hashMap = {contacts: '联系人', phone: "联系方式"}
  if (formData.type === 1) {
    hashMap['certNumber'] = '证件号'
    hashMap['certType'] = '证件类型'
  } else if (formData.type === 0) {
    formData.enterpriseName = e.detail.value.enterpriseName
    hashMap['enterpriseName'] = '企业名称'
  }
  for (const key in hashMap) {
    console.log(key, isPropertyNull(formData, key))
    if (isPropertyNull(formData, key)) {
      proxy.modal.msg(`请填写${hashMap[key]}`)
      return
    }
  }
  customNav('/package_kuafu_apartment/pages/home/pages/reserve/agree')
  uni.setStorage({
    key: 'reserve_house',
    data: formData,
    success: function () {
      console.log('success');
    }
  });
}

function handleChange(event) {
  if (formData.certType !== checkVal.value) {
    checkVal.value = formData.certType
    formData.certName = event.detail.data?.text
    popup.value?.close()
  }
}

const setPopupData = (type) => {
  popup.value.open()
}
const onCurrentTab = (e) => {
  formData.type = e
}
</script>
<style lang="less" scoped>
@import "./style/index.less";
</style>
